<template>
  <div style="/*background-color: rgb(237, 237, 237);*/">
    <van-overlay :show="overlayVisable" z-index="2">
      <div class="wrapper">
        <van-loading size="24px">
          <span id="loading">数据加载中...</span>
        </van-loading>
      </div>
    </van-overlay>

    <!-- 头部 -->
    <div class="home">
      <van-nav-bar id="banner" title="">
        <template #title>
          <div style="color: grey">广科大校园在线点餐</div>
        </template>
      </van-nav-bar>
    </div>

    <!-- 中间内容 -->
    <div class="midContent">
      <!-- 头像  -->
      <div class="box1">
        <div class="picture">
          <van-image
            round
            :src="customerInfo.icon"
            fit="cover"
            position="center"
            @click="showPopup = true"
          />
        </div>
        <div class="userName">
          <span>{{ customerInfo.username }}</span>
        </div>
      </div>

      <!-- 我的余额  showRechargePopup -->
      <van-cell
        center
        is-link
        @click="showRechargePopup = true"
      >
        <template #title>
          &nbsp;&nbsp;&nbsp;
          <van-icon name="balance-o" />
          &thinsp;
          余额
        </template>
        <template #right-icon>
          ￥{{customerInfo.balance}}
          &nbsp;
          <van-icon name="arrow" />
        </template>
      </van-cell>

      <!-- 我的功能 宫格 -->
      <div class="grid-able">
        <van-grid :border="true" :column-num="4" square :gutter="10" clickable>
          <!-- 我的地址 -->
          <van-grid-item text="我的地址">
            <div class="grid-content">
              <div class="grid-icon">
                <van-icon name="location" size="30px" @click="onOpenAddress" />
              </div>
              <div class="grid-text">
                <span>我的地址</span>
              </div>
            </div>
          </van-grid-item>

          <!-- 我的评价 -->
          <van-grid-item text="我的评价">
            <div class="grid-content">
              <div class="grid-icon">
                <van-icon name="like" size="30px" @click="onSpenComment" />
              </div>
              <div class="grid-text">
                <span>我的评价</span>
              </div>
            </div>
          </van-grid-item>

          <!-- 我的消费 -->
          <van-grid-item text="我的消费">
            <div class="grid-content">
              <div class="grid-icon">
                <van-icon name="cart" size="30px" @click="onOpenConsume" />
              </div>
              <div class="grid-text">
                <span>我的消费</span>
              </div>
            </div>
          </van-grid-item>

        </van-grid>
      </div>

      <!-- 退出登录 -->
      <div class="outLoginDiv">
        <van-button
          round
          block
          type="warning"
          native-type="submit"
          @click="outLogin"
        >
          退出登录
        </van-button>
      </div>
    </div>

    <!-- 底部空白 -->
    <div class="footer"></div>

    <!-- 我的账号弹窗 showPopup -->
    <van-popup
      v-model="showPopup"
      closeable
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <div class="home">
        <van-nav-bar id="banner" title="">
          <template #title>
            <div style="color: grey">我的信息</div>
          </template>
        </van-nav-bar>
      </div>
      <!-- 我的信息 Cell 单元格 -->
      <van-cell-group class="mine" inset>

        <!-- 头像 showEditPicturePopup -->
        <van-cell center title="头像" is-link @click="showEditPicture = true">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-image
              round
              :src="customerInfo.icon"
              fit="cover"
              position="right"
              width="50px"
              height="50px"
            />
          </template>
        </van-cell>
        <van-popup
          class="popup-uploader"
          v-model="showEditPicture"
          style="height: '200pxpx'; width: '200px'; border-radius: 101px"
        >
          <van-uploader
            v-model="fileList"
            preview-size="200px"
            multiple
            :max-count="1"
            :after-read="afterRead"
            :before-read="beforeRead"
          />
        </van-popup>

        <!-- 昵称 -->
        <van-cell
          center
          title="昵称"
          is-link
          :value="customerInfo.name"
          @click="showEditName = true"
        />
        <van-popup
          v-model="showEditName"
          position="bottom"
          :style="{ height: '25%', width: '100%' }"
        >
          <van-form @submit="onSubmitName">
            <van-cell-group inset>
              <van-field
                v-model="newName"
                name="name"
                label="昵称"
                placeholder="昵称"
                :rules="[{ required: true, message: '请填写昵称' }]"
                style="margin-top: 0%"
              />
            </van-cell-group>
            <div style="margin-top: 0%">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </van-popup>

        <!-- 用户名 -->
        <van-cell
          title="用户名"
          is-link
          :value="customerInfo.username"
          @click="showEditUserName = true"
        />

        <!-- 账号密码 -->
        <van-cell
          center
          title="账号密码"
          is-link
          value=""
          @click="showEditPassword = true"
        />

        <!-- 手机号 -->
        <van-cell
          title="手机号"
          is-link
          :value="customerInfo.tel"
          @click="showEditTel = true"
        />
        <van-popup
          v-model="showEditTel"
          position="bottom"
          :style="{ height: '25%', width: '100%' }"
        >
          <van-form @submit="onSubmitTel">
            <van-cell-group inset>
              <van-field
                v-model="newTel"
                name="tel"
                label="手机号"
                maxlength="11"
                placeholder="手机号"
                :rules="[
                  { required: true, message: '请填写手机号' },
                  {
                    pattern: /^1[3456789]\d{9}$/,
                    message: '请输入正确的手机号',
                  },
                ]"
                style="margin-top: 0%"
              />
            </van-cell-group>
            <div style="margin-top: 0%">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </van-popup>

        <!-- 支付密码 -->
        <van-cell
          title="支付密码"
          is-link
          value=""
          @click="showEditPPPopup = true"
        />
        <van-popup
          v-model="showEditPPPopup"
          position="bottom"
          :style="{ height: '40%', width: '100%' }"
        >
          <van-form @submit="onSubmitPP">
            <van-cell-group inset>
              <van-field
                v-model="oldPPassword"
                type="password"
                name="oldPaymentPassword"
                label="旧密码"
                maxlength="6"
                placeholder="旧密码"
                :rules="[{ required: true, message: '输入旧的支付密码' }]"
                style="margin-top: 0%"
              />
            </van-cell-group>
            <van-cell-group inset>
              <van-field
                v-model="newPPassword"
                type="password"
                name="newPaymentPassword"
                label="新密码"
                maxlength="6"
                placeholder="新密码"
                :rules="[{ required: true, message: '输入新的支付密码' }]"
                style="margin-top: 0%"
              />
            </van-cell-group>
            <div style="margin-top: 0%">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </van-popup>

      </van-cell-group>
    </van-popup>

    <!-- 充值弹窗 -->
    <van-popup
      closeable
      position="bottom"
      v-model="showRechargePopup"
      :style="{ height: '38%', width: '100%' }"
    >
      <div style="margin-top: 15%">
        <van-form @submit="onSubmitRecharge">
          <van-cell-group inset>
            <van-field
              v-model="rechargeAmount"
              name="充值金额"
              label="充值金额"
              :rules="[
                { required: true, message: '请填写充值金额' },
                // 只能输入数字，且不能以 0 开头 /^[1-9]\d*$/
                { pattern: /^[1-9]\d*$/, message: '输入格式错误' },
              ]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              充值
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <!-- 我的地址弹窗 -->
    <div class="mineAddressPopup">
      <!-- 我的地址list弹窗 showMineAddress-->
      <van-popup
        v-model="showMineAddress"
        closeable
        position="bottom"
        :style="{ height: '70%', width: '100%' }"
      >
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          default-tag-text="默认"
          @add="onAdd"
          @edit="getAreaCode"
        />
      </van-popup>

      <!-- 更新 删除 地址弹窗 showEditAddress -->
      <van-popup
        v-model="showEditAddress"
        closeable
        position="bottom"
        :style="{ height: '70%', width: '100%' }"
      >
        <van-address-edit
          :area-list="areaList"
          show-delete
          show-set-default
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          :area-placeholder="
            addressInfo.province + addressInfo.city + addressInfo.county
          "
          @save="onUpdate"
          @delete="onDelete"
          :address-info="{
            name: addressInfo.name,
            tel: addressInfo.tel,
            areaCode: this.provinceCode,
            areaCode: this.cityCode,
            areaCode: this.countyCode,
            addressDetail: addressInfo.addressDetail,
            isDefault: addressInfo.isDefaultTemp,
          }"
        />
      </van-popup>

      <!-- 新增地址弹窗 showAddAddress -->
      <van-popup
        v-model="showAddAddress"
        closeable
        position="bottom"
        :style="{ height: '70%', width: '100%' }"
      >
        <van-address-edit
          :area-list="areaList"
          show-set-default
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
        />
      </van-popup>
    </div>

    <!-- 我的评价弹窗 -->
    <div class="mineCommentPopup">
      <van-popup
        v-model="showMineComment"
        closeable
        position="bottom"
        :style="{ height: '100%', width: '100%', overflow: 'hidden' }"
      >
        <div class="home">
          <van-nav-bar id="banner" title="">
            <template #title>
              <div style="color: grey">我的评价</div>
            </template>
          </van-nav-bar>
        </div>
        <div class="commentsEntire">
          <div
            class="commentBox"
            :key="index"
            v-for="(item, index) in comments"
          >
            <div class="commentContent" style="padding-bottom: 10px;">
              <van-cell-group inset>
                <van-cell is-link >
                  <!-- 使用 title 插槽来自定义标题 -->
                  <template #title>
                    <div class="box-content">
                      <div class="left">
                        <van-image
                          round
                          width="85%"
                          height="60%"
                          :src="item.avatar"
                        />
                      </div>
                      <div class="right" @click="toComment(item.name, item.createBy)">
                        <span class="shopName1">{{item.name}}</span>
                        <br />
                        <span class="commentTime">{{item.createTime}}</span>
                        <br />
                        <span style="font-size: 10px; margin-right: 5%"
                          >商品评分</span
                        >
                        <van-rate
                          allow-half
                          v-model="item.foodScore"
                          :size="10"
                          color="#ffd21e"
                          void-icon="star"
                          void-color="#eee"
                        />
                        <br>
                        <span style="font-size: 10px; margin-right: 5%"
                          >服务评分</span
                        >
                        <van-rate
                          allow-half
                          v-model="item.serviceScore"
                          :size="10"
                          color="#ffd21e"
                          void-icon="star"
                          void-color="#eee"
                        />
                        <span
                          style="font-size: 10px; margin-left: 3%; color: gold"
                          >{{ item.score }}</span
                        >
                        <br>
                        <div style="height:95%; margin-top: 5%; font-size:10px; word-wrap: break-word;">
                          <div style="float: left">我的评价</div>
                          <div style="margin-left: 5%; border: 1px solid rgb(240, 240, 240); float: left; width:70%; height: 100%">
                            <span>{{item.remake}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </van-cell>
              </van-cell-group>
            </div>
            <van-divider />
          </div>
        </div>
      </van-popup>
    </div>

    <!-- 我的消费弹窗 -->
    <div class="mineConsumePopup">
      <!-- 消费列表 -->
      <van-popup
        closeable
        position="bottom"
        v-model="showMineConsume"
        :style="{ height: '100%', width: '100%' }"
      >
        <div class="home">
          <van-nav-bar id="banner" title="">
            <template #title>
              <div style="color: grey">我的消费</div>
            </template>
          </van-nav-bar>
        </div>
        <div style="height: 90%; overflow-y: auto">
          <div class="" :key="index" v-for="(item, index) in this.consumeList">
            <van-cell-group inset>
              <van-cell is-link center @click="onOpenConsumeDetail(index)">
                <template #title>
                  <div style="height: 35px; width: 100%">
                    <div style="height: 35px; width: 35px; float: left">
                      <van-image
                        round
                        width="35px"
                        height="35px"
                        :src="item.avatar"
                      />
                    </div>
                    <div style="height: 35px; width: 50%; float: left">
                      <div style="margin-top: 5px; margin-left: 7px">
                        <span>{{ item.name }}</span>
                        <!-- <span>商家名称</span> -->
                      </div>
                    </div>
                  </div>
                  <van-divider />
                  <div style="height: 140px; width: 100%">
                    <div style="text-align: center">
                      <div><span>付款金额</span></div>
                      <div style="margin-top: 4%">
                        <span style="font-size: 25px"
                          >￥ {{ item.totalMoney }}</span
                        >
                      </div>
                      <div style="margin-top: 4%"></div>
                      <br />
                    </div>
                    <div>
                      <div style="width: 23%; float: left">
                        <span>支付方式</span>
                      </div>
                      <div style="width: 50%; float: left">
                        <span>{{ item.payType }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </div>
      </van-popup>

      <!-- 消费详情 -->
      <van-popup
        closeable
        position="bottom"
        v-model="showConsumeDetail"
        :style="{ height: '100%', width: '100%' }"
      >
        <div class="home">
          <van-nav-bar id="banner" title="">
            <template #title>
              <div style="color: grey">消费详情</div>
            </template>
          </van-nav-bar>
        </div>
        <div style="height: 90%; overflow-y: auto">
          <div
            style="
              background-color: white;
              height: 35%;
              width: 100%;
              text-align: center;
            "
          >
            <div style="margin-top: 1%">
              <van-image
                round
                width="45px"
                height="45px"
                :src="this.curConsumeDetail.avatar"
                style="margin-top: 10%"
              />
            </div>
            <div style="margin-top: 4%">
              <span>{{ this.curConsumeDetail.name }}</span>
            </div>
            <div style="margin-top: 4%">
              <span style="font-size: 25px"
                >-{{ this.curConsumeDetail.totalMoney }}</span
              >
            </div>
          </div>
          <van-divider />
          <div
            style="
              background-color: white;
              height: 40%;
              width: 80%;
              padding: 10%;
              font-size: 15px;
            "
          >
            <div style="width: 30%; float: left; margin-bottom: 6%">
              <span>当前状态</span>
            </div>
            <div style="width: 70%; float: left; margin-bottom: 6%">
              <span>已支付</span>
            </div>
            <div style="width: 30%; float: left; margin-bottom: 6%">
              <span>商家名称</span>
            </div>
            <div style="width: 70%; float: left; margin-bottom: 6%">
              <span>{{ this.curConsumeDetail.name }}</span>
            </div>
            <div style="width: 30%; float: left; margin-bottom: 6%">
              <span>支付时间</span>
            </div>
            <div style="width: 70%; float: left; margin-bottom: 6%">
              <span>{{ this.curConsumeDetail.createTime }}</span>
            </div>
            <div style="width: 30%; float: left; margin-bottom: 6%">
              <span>支付方式</span>
            </div>
            <div style="width: 70%; float: left; margin-bottom: 6%">
              <span>{{ this.curConsumeDetail.payType }}</span>
            </div>
            <div style="width: 30%; float: left; margin-bottom: 6%">
              <span>订单流水号</span>
            </div>
            <div style="width: 70%; float: left; margin-bottom: 6%; word-wrap: break-word;">
              <span>{{ this.curConsumeDetail.serialNum }}</span>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    
    <!-- 空白页面提示 -->
    <div>
      <van-popup 
        closeable
        position="bottom"
        v-model="showEmpty"
        :style="{ height: '100%', width: '100%' }"
      >
        <div class="home">
          <van-nav-bar id="banner" title="">
            <template #title>
              <div style="color: grey">我的消费</div>
            </template>
          </van-nav-bar>
        </div>
        <div>
          <van-empty description="😙，记得todo哟♥" />
        </div>
      </van-popup>
    </div>

  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { uploadOss } from "../../utils/uploadOss.js";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import request from "@/utils/request";
export default {
  name: "",
  data() {
    return {
      showEmpty: false,
      overlayVisable: false,
      password: "",
      oldPPassword: "",
      newPPassword: "",
      newName: "",
      newTel: "",
      balance: "100",
      rechargeAmount: 0,
      fileList: [],
      activeNames: ["1"],
      showList: false,
      showPopup: false,
      showEditPicture: false,
      showEditName: false,
      showEditUserName: false,
      showEditPassword: false,
      showEditTel: false,
      showEditPPPopup: false,
      showRechargePopup: false,
      chosenAddressId: "1",
      showMineAddress: false,
      showMineComment: false,
      showMineConsume: false,
      showConsumeDetail: false,
      showEditAddress: false,
      showAddAddress: false,
      areaList,
      addressInfo: [],
      provinceCode: "",
      cityCode: "",
      countyCode: "",
      showEditTel: false,
      comments: [],
      consumeList: [],
      curConsumeDetail: {},
      orderStatus: [
        "",
        "已支付",
        "未支付",
        "待派送",
        "已送达",
        "已完成",
        "待评价",
        "已评价",
        "已取消",
      ],
    };
  },
  created() {
  },
  methods: {
    ...mapActions("customer", [
      "getcustomerInfo",
      "getAddressList",
      "addAddressList",
      "updateAddressList",
      "deleteAddressList",
      "updateCustomerInfo",
    ]),

    // 确认充值
    onSubmitRecharge(value) {
      this.$dialog
        .confirm({
          title: "标题",
          message: "确认充值",
        })
        .then(() => {
          // on confirm
          let t = (this.customerInfo.balance) + (value.充值金额 - 0);
          this.customerInfo.balance = Number(t);
          this.updateCustomerInfo({
            customerInfoTemp: this.customerInfo,
          });
          this.showRechargePopup = false;
          this.rechargeAmount = 0;
          this.$router.push("/manager/mine");
          Toast("充值成功");
        })
        .catch(() => {
          // on cancel
        });
    },

    // 打开我的地址
    onOpenAddress() {
      this.getAddressList();
      this.showMineAddress = true;
    },

    // 打开我的评价
    onSpenComment() {
      if(this.comments.length == 0){
        this.showEmpty = true;
      }else{
        this.showMineComment = true;
      }
    },

    // 打开我的消费
    onOpenConsume() {
      if(this.consumeList.length == 0){
        this.showEmpty = true;
      }else{
        this.showMineConsume = true;
      }
    },

    // 打开消费详情
    onOpenConsumeDetail(index) {
      this.curConsumeDetail = this.consumeList[index];
      this.showConsumeDetail = true;
    },

    // 获得我的消费记录
    getMineConsume() {
      request
        .get("/schoolOrder/app/order/selectCustomerConsumeById", {
          params: {
            id: this.customerInfo.id,
          },
        })
        .then((res) => {
          this.consumeList = res.data.data;
          this.consumeList = this.consumeList.filter(item => item.status == "7"||item.status == "5");
        });
    },

    // 打开新增地址
    onAdd() {
      this.showAddAddress = true;
    },

    // 打开编辑地址
    onEdit(item, index) {
      if (this.addressList[index].isDefault == 1) {
        this.addressList[index].isDefaultTemp = true;
      } else {
        this.addressList[index].isDefaultTemp = false;
      }
      this.showEditAddress = true;
    },

    // 获取 省、市、区 的地区码
    getAreaCode(item, index) {
      this.addressInfo = this.addressList[index];
      let resultProvince = Object.entries(this.areaList.province_list);
      resultProvince.some((item) => {
        if (item[1] == this.addressInfo.province) {
          this.provinceCode = item[0];
          return true;
        }
      });
      let resultCity = Object.entries(this.areaList.city_list);
      resultCity.some((item) => {
        if (item[1] == this.addressInfo.city) {
          this.cityCode = item[0];
          return true;
        }
      });
      let resultCounty = Object.entries(this.areaList.county_list);
      resultCounty.some((item) => {
        if (item[1] == this.addressInfo.county) {
          this.countyCode = item[0];
          return true;
        }
      });
      setTimeout(() => {
        //设置延迟执行
        this.onEdit(item, index);
      }, 10);
    },

    // 保存新增地址信息
    onSave(content) {
      let address =
        content.province +
        content.city +
        content.county +
        content.addressDetail;
      content.address = address;
      // 将content包装成customerAddress丢给params
      content.isDefaultTemp = content.isDefault ? 1 : 0;
      if(content.isDefaultTemp == 1){
        if(!this.findIsDefault()){
          this.addAddressList({
            customerAddress: content,
          });
          this.showAddAddress = false;
          this.showMineAddress = false;
          Toast("新增成功");
        }else{
          Toast("已经有默认地址啦！");
        }
      }else{
        this.addAddressList({
          customerAddress: content,
        });
        this.showAddAddress = false;
        this.showMineAddress = false;
        Toast("新增成功");
      }
    },

    // 保存更新地址信息
    onUpdate(content) {
      let address =
        content.province +
        content.city +
        content.county +
        content.addressDetail;
      content.address = address;
      content.id = this.addressInfo.id;
      content.customerId = this.addressInfo.customerId;
      // 将content包装成customerAddress丢给params
      content.isDefaultTemp = content.isDefault ? 1 : 0;
      if(content.isDefaultTemp == 1){
        if(!this.findIsDefault()){
          this.updateAddressList({
            customerAddress: content,
          });
          this.showEditAddress = false;
          this.showMineAddress = false;
          Toast("修改成功");
        }else{
          Toast("已经有默认地址啦！");
        }
      }else{
        this.updateAddressList({
          customerAddress: content,
        });
        this.showEditAddress = false;
        this.showMineAddress = false;
        Toast("修改成功");
      }
      
    },

    // 遍历addressList是否存在默认地址
    findIsDefault(){
      for(let i=0; i<this.addressList.length; i++){
        if(this.addressList[i].isDefault == 1){
          return 1;
        }
      }
      return 0;
    },

    // 删除地址
    onDelete() {
      this.deleteAddressList({
        id: this.addressInfo.id,
      });
      this.showEditAddress = false;
      this.showMineAddress = false;
      Toast("删除成功");
    },

    // 修改昵称
    onSubmitName(value) {
      this.customerInfo.name = value.name;
      this.updateCustomerInfo({
        customerInfoTemp: this.customerInfo,
      });
      this.showEditName = false;
      this.$router.push("/manager/mine");
      Toast("修改成功");
    },

    // 修改密码
    onSubmitPassword(value) {
      this.$dialog
        .confirm({
          title: "标题",
          message: "确认修改密码，将返回登录界面，重新登录。",
        })
        .then(() => {
          // on confirm
          this.customerInfo.password = value.passwordForm;
          this.updateCustomerInfo({
            customerInfoTemp: this.customerInfo,
          });
          Toast("修改成功");
          this.showEditTel = false;
          // localStorage.removeItem("token");
          sessionStorage.clear();
          localStorage.clear();
          this.$router.push("/");
        })
        .catch(() => {
          // on cancel
        });
    },

    // 修改手机号
    onSubmitTel(value) {
      this.customerInfo.tel = value.tel;
      this.updateCustomerInfo({
        customerInfoTemp: this.customerInfo,
      });
      this.showEditTel = false;
      this.$router.push("/manager/mine");
      Toast("修改成功");
      this.newTel = "";
    },

    // 修改支付密码
    onSubmitPP(value) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认修改支付密码",
        })
        .then(() => {
          // on confirm
          if (value.oldPaymentPassword != this.customerInfo.payPassword) {
            Toast("原密码错误");
          } else {
            if (value.newPaymentPassword == this.customerInfo.payPassword) {
              Toast("新密码与原密码相同");
            } else {
              this.customerInfo.payPassword = value.newPaymentPassword;
              this.updateCustomerInfo({
                customerInfoTemp: this.customerInfo,
              });
              this.showEditPPPopup = false;
              Toast("修改成功");
              this.oldPPassword = "";
              this.newPPassword = "";
            }
          }
        })
        .catch(() => {
          // on cancel
        });
    },

    // 上传图片前的预处理
    beforeRead(file) {
      //说明是一个文件
      if (typeof file.length === "undefined") {
        //说明是图片
        if (file.type.indexOf("image") != -1) {
          //开始上传
          Toast("正在上传中...");
          return true;
        } else {
          Toast("只能上传图片！");
        }
      } else {
        Toast("一次只能传一张图！！！");
      }

      return false;
    },

    // 上传凭证
    afterRead(file) {
      file.file.status = "uploading";
      file.file.message = "上传中...";
      this.overlayVisable = true;
      uploadOss(file.file, "schoolOrder").then((res) => {
        //这里即可拿到oss上传后的结果
        this.customerInfo.icon = res[0].url;
        if (res.length == 1) {
          this.overlayVisable = false;
          Toast("上传成功");
          this.updateCustomerInfo({
            customerInfoTemp: this.customerInfo,
          });
        } else {
          this.overlayVisable = false;
          Toast("上传失败");
        }
      });
    },

    // 获得我的评价数据
    getMineComments(){
      request.get('/schoolOrder/app/selectCustomerRemakeById',{
        params:{
          id: this.customerInfo.id
        }
      }).then(
        res => {
          this.comments = res.data.data;
        }
      )
    },

    // 跳转到评价信息页面
    toComment(shopName, createBy) {
      console.log(shopName, createBy);
      sessionStorage.setItem('shopName',shopName)
      sessionStorage.setItem("createBy",createBy)
      setTimeout(() => {
        //设置延迟执行
        this.$router.push("/shop");
      }, 250);
    },

    // 退出登录
    outLogin() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "退出登录后，将雪重新登录后才能再次使用",
        })
        .then(() => {
          // on confirm
          sessionStorage.clear();
          localStorage.clear();
          this.$router.push("/");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  components: {},
  computed: {
    ...mapState("customer", ["customerInfo", "addressList"]),
    ...mapState("shopInfo", ["info"]),
  },
  beforeMount() {},
  mounted() {
    this.$store.dispatch("shopInfo/getShopInfo");
    this.getcustomerInfo();
    setTimeout(() => {
        //设置延迟执行
      this.getMineConsume();
      this.getMineComments();
    }, 1000);
    sessionStorage.setItem('curActive',2);
  },
  watch: {},
};
</script>
<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  
}

.home #banner {
  background-color: gold;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.midContent {
  height: 90%;
  width: 100%;
  overflow: auto;
}

.box1 {
  margin: 2%;
  margin-top: 25px;
}

.picture {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  margin: 0 auto;
  border: 1px solid rgb(255, 255, 255);
  overflow: hidden;
  border: 3px solid rgb(240, 240, 240);
  
  
}

.picture .van-image {
  width: 100%;
  height: 100px;
  transition: all 1s;
}

.userName {
  margin: 0 auto;
  overflow: hidden;
  margin-top: 16px;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

.mine {
  padding-top: 4%;
}

.van-uploader__upload {
  margin: 0;
}

.grid-able {
  margin-top: 25px;
  overflow-y: auto;
}

.grid-content .grid-icon {
  margin: 15px;
  text-align: center;
}

.grid-content .grid-icon .van-icon {
  color: gold;
}

.grid-content .grid-text {
  text-align: center;
  font-size: 13px;
}

.van-radio-group {
  height: 85%;
  margin-top: 10%;
  overflow: auto;
}

.van-address-edit {
  margin-top: 10%;
}

.van-cell-group {
  margin-top: 5%;
  height: 85%;
}

.box-content {
  width: 100%;
  float: left;
}

.left {
  height: 120px;
  float: left;
  width: 30%;
}
.right {
  height: 120px;
  float: left;
  width: 70%;
}
.right .shopName1 {
  font-size: 17px;
}
.right .commentTime {
  font-size: 10px;
}
.van-button {
  background-color: gold;
  border: 0;
  width: 95%;
  box-sizing: border-box;
  margin-left: 2%;
}

.commentsEntire {
  height: 90%;
  overflow-y: auto;
}
.commentBox {
  height: 53%;
}
.commentBox .commentContent {
  margin: 0;
  height: 350px;
}
.commentBox .commentContent .van-cell-group {
  height: 80%;
}
.commentBox .commentContent .van-cell-group .van-cell {
  height: 100%;
}
.commentBox .commentContent .clearButton {
  height: 20%;
}
.commentBox .commentContent .clearButton .van-icon {
  margin-top: 3%;
  margin-left: 75%;
}

.outLoginDiv {
  margin-top: 15%;
}

.footer {
  height: 100px;
}
</style>
<style>
.van-uploader__preview {
  margin: 0;
}

.van-button--block {
  margin: 5%;
  width: 90%;
}

.van-popup {
  background-color: rgb(248, 248, 248);
}

.van-button--danger {
  background-color: gold;
  border: 1px solid gold;
}

.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #323233;
  background-color: gold;
}

.van-coupon-list__exchange-bar .van-button--danger {
  background-color: #fff;
  border: 1px solid white;
}

.van-cell__title .van-field__label{
  border-right: 1px solid rgb(237, 237, 237);
}
</style>